<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow-x: hidden;

        }
    </style>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/webjars/jquery/jquery.js"></script>
</head>
<body>
<div class="demoTable">
    <div class="layui-form-item">
        <label class="layui-form-label">选择角色</label>
        <div class="layui-input-block">
            <form class="layui-form" action="">
                <select class="roleSelect" name="rId" lay-filter="roleSelect" lay-verify="required">
                    <option value=""></option>
                    <option th:each="r:${roles}" th:value="${r.rId}" th:text="${r.rName}"></option>
                </select>
            </form>
        </div>
    </div>
</div>
<table class="layui-hide" id="authoritiesInfo" lay-filter="authoritiesInfo"></table>
</body>
<script type="text/html" id="barDemo">
    <div th:if="${insertReadonly}!= null">
        <input type="checkbox" class="lock" value="{{d.aId}}" title="授权" disabled="disabled" lay-filter="lock"
               {{ d.access== true ? 'checked' : '' }} >
    </div>
    <div th:if="${insertReadonly}== null">
        <input type="checkbox" class="lock" value="{{d.aId}}" title="授权"  lay-filter="lock"
               {{ d.access== true ? 'checked' : '' }} >
    </div>
</script>
<script>
    layui.use(['table', 'form'], function () {

        var table = layui.table
            , form = layui.form;
        var authoritierInfo = [
            {field: 'aId', title: 'aId', sort: true, fixed: 'left'}
            , {field: 'aDescribe', title: '描述', sort: true, fixed: 'left'}
            , {
                field: 'aType', title: '类型', sort: true
                , templet: function (d) {
                    if (d.aType == 1) {
                        return '<i class="layui-icon">&#xe60a;</i>' + '菜单';
                    } else {
                        return '<i class="layui-icon">&#xe617;</i>' + '按钮';
                    }
                }
            }
            , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
        ];
        table.render({
            elem: '#authoritiesInfo'
            , url: 'authorities/all' //数据接口
            , toolbar: '#toolbarDemo'
            , title: '用户权限表'
            , cols: [authoritierInfo]
            , response: {
                statusCode: 200
            }
            , page: false
            , id: 'authoritiesInfo'
        });

        form.render();
        form.on('select(roleSelect)', function (data) {
            //执行重载
            table.reload('authoritiesInfo', {
                url: 'authorities/all?rId=' + data.value
            });
        });
        form.on('checkbox(lock)', function (obj) {
            //获取当前select的id
            var rId = $(".roleSelect").val();
            if (rId) {
                var aId = this.value;
                var block = obj.elem.checked;
                console.log(rId + " " + aId + " " + block);
                if (block) {
                    //授权，增加access
                    $.ajax({
                        url: 'authorities/access?aId=' + aId + '&rId=' + rId,
                        type: 'get',
                        success: function (data) {
                            layer.msg('授权成功');
                        }
                    });
                } else {
                    //删除授权
                    $.ajax({
                        url: 'authorities/access?aId=' + aId + '&rId=' + rId,
                        type: 'delete',
                        success: function (data) {
                            layer.msg('解除授权成功');
                        }
                    });
                }
            } else {
                layer.msg('请选择角色');
                $(".lock").prop("checked", false);
                form.render('checkbox');
            }
        });
    });
</script>
</html>